<template>
	<view class="container">
		<view class="agent">
			<view class="info">
				<view class="item" v-for="item in list" :key='item.id' @click="toInfo(item.url)">
					<image :src="item.img" mode="widthFix"></image>
					<text>{{item.text}}</text>
				</view>
			</view>

			<view class="battery u-p-l-20 u-p-r-20" :class="myList.length>6?'battery_scroll':''">
				<view class="my">
					<text>我的浮板</text>
					<text class="num">当前<text>{{battery}}</text>使用</text>
				</view>
				<scroll-view scroll-y="true" class="content" v-if="myList.length != 0" @scrolltolower="loadMore">
					<view class="batt" v-for="(item,index) in myList" :key="index" @click.stop="toBatteryDetail(item.code)">
						<view class="left">
							<image src="/static/img/agent/battery.png" mode="widthFix"></image>
							<view class="txt">
								<view class="name">{{item.name}}</view>
								<view class="money">
									总收入
									<text>￥{{item.total_fee}}</text>
								</view>
							</view>
						</view>
						<view class="right">
							<view class="u-btn" @click.stop="caoZuoDevice(item.device_id)">
								操作设备
							</view>
							<view>
								<text class="use">{{item.use_num_text}}</text>/
								<text>{{item.total_text}}</text>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="content" v-else>
					<view class="empty">
						暂无明细
					</view>
				</view>
			</view>
			<!--报表-->
			<view class="huizong u-p-t-20  u-p-b-20  u-p-l-30  u-p-r-30">
				<view class="huizongTop u-flex u-row-left u-col-center">
					<image class="u-m-r-20" style="width: 40rpx; height: 40rpx;" src="/static/image/zonglan.png"></image>
					<view class="huizongTitle">收入概览</view>
				</view>
				<view class="huizongModdile u-flex u-row-left u-col-top u-flex-col u-m-t-12">
					<view class="shouRu u-m-t-6">
						当天收入(元)
					</view>
					<view class="money u-m-t-6">
						{{ dataFrom.day>0?('+'+dataFrom.day):(dataFrom.day)}}
					</view>
					<view class="orderNum u-m-t-6">
						{{dataFrom.day_num}}单
					</view>
				</view>
				<view class="huizongBottom u-flex u-row-between u-col-top u-m-t-12">
					<view class="huizongBottomItem u-flex u-row-left u-col-top u-flex-col u-m-t-12">
						<view class="shouRu u-m-t-6">
							当月收入(元)
						</view>
						<view class="money u-m-t-6">
							{{ dataFrom.month>0?('+'+dataFrom.month):(dataFrom.month)}}
						</view>
						<view class="orderNum u-m-t-6">
							{{ dataFrom.month_num }}单
						</view>
					</view>
					<view class="huizongBottomItem u-flex u-row-left u-col-top u-flex-col u-m-t-12">
						<view class="shouRu u-m-t-6">
							当年收入(元)
						</view>
						<view class="money u-m-t-6">
							{{ dataFrom.year>0?('+'+dataFrom.year):(dataFrom.year)}}
						</view>
						<view class="orderNum u-m-t-6">
							{{ dataFrom.year_num }}单
						</view>
					</view>
				</view>
			</view>
			<view class="huizongBaobiao u-p-t-20  u-p-b-20  u-p-l-30  u-p-r-30">
				<view class="huizongTop u-flex u-row-left u-col-center">
					<image class="u-m-r-20" style="width: 40rpx; height: 40rpx;" src="/static/image/baobiao.png"></image>
					<view class="huizongTitle">月收入增长曲线</view>
				</view>
				<view class="huizongModdile u-flex u-row-left u-col-top u-flex-col u-m-t-12">
					<view class="charts-box">
						<qiun-data-charts type="column" :chartData="chartsDataColumn3":canvas2d="true" canvasId="componentsinit" :echartsH5="true" :echartsApp="false"/>
<!--						<qiun-data-charts type="column" :opts="optsMix" :chartData="chartDataMix" />-->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {
	agentBattery,
	accountIndex,
	getUserInfo, openDevice, indexData
} from '../../api/api.js'
	export default {
		data() {
			return {
				list: [{
						id: 1,
						img: '/static/img/agent/money.png',
						text: '总收入',
						url: '/pages/agent/index/income'
					},
					{
						id: 2,
						img: '/static/img/agent/use.png',
						text: '使用记录',
						url: '/pages/agent/index/record'
					},
					{
						id: 3,
						img: '/static/img/agent/day.png',
						text: '日报表',
						url: '/pages/agent/index/day'
					},
					{
						id: 4,
						img: '/static/img/agent/month.png',
						text: '月报表',
						url: '/pages/agent/index/month'
					}
				],
				battery: '',
				chartsDataColumn3:{},
				day_total: '',
				month_total: '',
				online: '',
				use_total: '',
				myList: [],
				total: 0,
				last_page: 1,
				current_page: 1,
				per_page: 10,
				column: {
					"categories": ["2016", "2017", "2018", "2019", "2020", "2021"],
					"series": [{
						"name": "月收入(元)",
						"data": [35, 36, 31, 33, 13, 34]
					}]
				},
				dataFrom:{}
			}
		},
		onLoad() {
			this.getuser();
			this.getinitData();
		},
		onShow() {
			this.getInfo()
		},
		methods: {
			// 代理
			toInfo(url) {
				uni.navigateTo({
					url: url
				})
			},
			getInfo(loadMore) {
				agentBattery({
					limit: this.per_page,
					page: this.current_page
				}).then(res => {
					if (loadMore) {
						console.log(loadMore)
						for (let i = 0; i < res.data.data.length; i++) {
							this.myList.push(res.data.data[i])
						}
					} else {
						this.myList = res.data.data
					}
					this.battery = res.data.curr_use
					this.total = res.data.total
					this.last_page = res.data.last_page
					// this.current_page = res.data.current_page
					// this.myList = res.data.data
				})
			},
			getuser(){
				getUserInfo().then(res=>{
					console.log(res)
					if(res.data.is_operate == 0){
						uni.showModal({
							title: '提示',
							content: '暂无权限',
							showCancel: false,
							success: function(res) {
								uni.reLaunch({
									url: '/pages/login/login'
								})
							}
						})
					}
				})
			},
			loadMore(e) {
				// console.log(e)
				if (this.current_page < this.last_page) {
					this.current_page += 1
					this.getInfo('loadMore')
				}
			},
			toBatteryDetail(id) {
				uni.navigateTo({
					url: '/pages/agent/index/detail?id=' + id
				})
			},
			caoZuoDevice(id){
				uni.navigateTo({
					url: '/pages/agent/index/battery?device_id=' + id
				})
			},
			getinitData(){
				indexData().then(res=>{
					console.log(res)
					if(res.code == 1){
						this.dataFrom = res.data;
						this.column.categories = this.dataFrom.categories;
						this.column.series[0].data =  this.dataFrom.series_data;
						this.getServerData();
					}
				})
			},
			getServerData() {
				
				//因部分数据格式一样，这里不同图表引用同一数据源的话，需要深拷贝一下构造不同的对象
				//开发者需要自行处理服务器返回的数据，应与标准数据格式一致，注意series的data数值应为数字格式
				console.log("===this.column",this.column)
				let tmpColumn3=JSON.parse(JSON.stringify(this.column));
				//series.linearGradient代表渐变色：
				//前4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始；
				//第5个参数为数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
				tmpColumn3.series[0].linearGradient=[0, 0, 0, 1,[{offset: 0, color: '#0EE2F8'},{offset: 1, color: '#1890FF'}]];
				console.log("===tmpColumn3",tmpColumn3)
				this.chartsDataColumn3=tmpColumn3;
			},
			complete(e) {
				console.log("渲染完成事件",e);
			},
			getIndex(e){
				console.log("获取点击索引事件",e);
			},
		},
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100%;
		background-color: #f6f6f6;
		overflow-y: scroll;
	}

	.agent {
		width: 100%;
		height: 100%;

		.info {
			width: 100%;
			height: 230upx;
			background-color: #FFFFFF;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.item {
				width: 20%;
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					width: 70%;
					margin-bottom: 20upx;
				}

				text {
					font-size: 24upx;
				}
			}
		}
		.battery {
			width: 100%;
			height: auto;
			background-color: #FFFFFF;
			margin-top: 16px;
			overflow: hidden;
			padding-bottom: 20px;
			.my {
				width: calc(100%);
				height: 80upx;
				margin: 0 auto;
				display: flex;
				font-size: 28upx;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1upx solid #e9e6e9;

				.num {
					color: #999999;
					font-size: 24upx;

					text {
						color: #fb817f;
					}
				}

			}

			.content {
				width: calc(100%);
				height: calc(100% - 80upx);
				margin: 0 auto;

				.batt {
					width: 100%;
					height: 130upx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1upx solid #e9e6e9;

					.left {
						display: flex;
						align-items: center;
						font-size: 28upx;

						image {
							width: 80upx;
							margin-right: 20upx;
						}

						.txt {

							.name {}

							.money {
								color: #999999;

								text {
									color: #fb817f;
								}
							}
						}
					}

					.right {
						font-size: 32upx;

						text {
							font-size: 24upx;
						}

						.use {
							color: #fb817f;
							font-size: 32upx;
						}
					}
				}

				.empty {
					height: 100upx;
					text-align: center;
					line-height: 100upx;
				}
			}
		}
		.battery_scroll{
			height: calc(100% - 280upx);
		}
	}
	@media screen and (min-width:800px){
		.agent .info .item image{
			width: 60px;
		}
	}
	.u-btn{
		border: 2rpx solid #3eb9fe;
		padding: 8rpx 12rpx;
		border-radius: 20rpx;
		color: #3eb9fe;
		margin-bottom: 10rpx;
		display: flex;
		justify-content: center;
		font-size: 26rpx;
	}
	.huizong{
		margin: 20rpx 20rpx;
		border-radius: 30rpx;
		background: #fff;
		min-height: 400rpx;
		.huizongTop{
			height: 60rpx;
			.huizongTitle{
				font-size: 36rpx;
				font-weight: bold;
			}
		}
		.huizongModdile{
			width: 100%;
			.shouRu{
				width: 100%;
				color: #666666;
			}
			.money{
				width: 100%;
				color: #F36B72;
				font-size: 48rpx;
				font-weight: bold;
			}
			.orderNum{
				padding: 4rpx 14rpx;
				border-radius: 20rpx;
				background: #5897FF;
				color: #fff;
				
			}
		}
		.huizongBottom{
			width: 100%;
			padding-bottom: 20rpx;
			.huizongBottomItem{
				width: 50%;
				.shouRu{
					width: 100%;
					color: #666666;
				}
				.money{
					width: 100%;
					color: #333;
					font-size: 38rpx;
					font-weight: bold;
				}
				.orderNum{
					padding: 4rpx 14rpx;
					border-radius: 20rpx;
					background: #5897FF;
					color: #fff;
					
				}
			}
		}
	}
	
	.huizongBaobiao{
		margin: 20rpx 20rpx;
		border-radius: 30rpx;
		background: #fff;
		min-height: 600rpx;
		.huizongTop{
			height: 60rpx;
			.huizongTitle{
				font-size: 36rpx;
				font-weight: bold;
			}
		}
		.huizongModdile{
			.charts-box {
				width: 100%;
				height: 300px;
			}
		}
	}
	</style>
